<template>
  <div>
    <sku-prop-type-editor v-model="value.skuPropTypeList" :lang-id.sync="activeLangId"/>
    <el-form-item label="价格与库存" :prop="prop">
      <div class="price-stock">
        <sku-batch-setting v-model="value"/>
        <sku-list-table v-model="value"/>
      </div>
    </el-form-item>
  </div>
</template>

<script>
import SkuPropTypeEditor from '@/framework/components/sku/SkuPropTypeEditor'
import LangTypeEnum from '@/framework/constant/LangTypeEnum'
import SkuField from '@/framework/components/sku/SkuField'
import SkuFieldTypeEnum from '@/framework/components/sku/SkuFieldTypeEnum'
import SkuBatchSetting from '@/framework/components/sku/SkuBatchSetting'
import SkuListTable from '@/framework/components/sku/SkuListTable'
import SkuListEntity from '@/framework/components/sku/SkuListEntity'
import DisplayModeEnum from '@/framework/components/sku/DisplayModeEnum'

export default {
  name: 'SkuEditor',
  components: { SkuListTable, SkuBatchSetting, SkuPropTypeEditor },
  props: {
    lang: {
      type: [Object, Boolean],
      default: null
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    prop: {
      type: String,
      default: ''
    },
    value: {
      type: Object,
      default() {
        return new SkuListEntity()
      }
    },
    skuFields: {
      type: Array, // element type SKuField
      default() {
        return [new SkuField({
          name: 'stockNum',
          title: '库存',
          fieldType: SkuFieldTypeEnum.INTEGER,
          displayMode: DisplayModeEnum.ADD
        }), new SkuField({
          name: 'stockNum',
          title: '现有库存',
          required: false,
          fieldType: SkuFieldTypeEnum.STATIC,
          displayMode: DisplayModeEnum.EDIT
        }), new SkuField({
          name: 'stockModifyNum',
          title: '修改库存',
          required: false,
          fieldType: SkuFieldTypeEnum.INTEGER_INC_DEC,
          displayMode: DisplayModeEnum.EDIT // 修改的时候可见
        }), new SkuField({
          name: 'salePriceUsdt',
          title: 'usdt售价',
          fieldType: SkuFieldTypeEnum.FLOAT,
          precision: 2
        }), new SkuField({
          name: 'defaultFlag',
          title: '默认规格',
          fieldType: SkuFieldTypeEnum.DEFAULT_SKU
        })
          //   new SkuField({
          //   name: 'salePriceCny',
          //   title: '人民币售价',
          //   fieldType: SkuFieldTypeEnum.FLOAT,
          //   precision: 2
          // }), new SkuField({
          //   name: 'salePriceUsd',
          //   title: '美元价格',
          //   fieldType: SkuFieldTypeEnum.FLOAT,
          //   precision: 2
          // }),

          //   , new SkuField({
          //   name: 'skuCover',
          //   title: '预览图',
          //   fieldType: SkuFieldTypeEnum.IMAGE
          // })
        ]
      }
    }
  },
  data() {
    return {
      activeLangId: this.lang ? LangTypeEnum.CNT.id : '' // 默认中文,
    }
  },
  computed: {
    inputDisabled() {
      return this.disabled || (this.elForm || {}).disabled
    }
  },
  provide() {
    return {
      skuEditor: this
    }
  },
  inject: {
    elForm: {
      default: null
    },
    elFormItem: {
      default: null
    }
  },
  watch: {
    isEdit() {
      this.value.setIsEdit(this.isEdit)
    },
    skuFields() {
      this.value.setSkuFields(this.skuFields)
    },
    'value.validSkuPropTypeList': {
      deep: true,
      handler() {
        this.value.calcSkuAllPropTypeList()
        this.value.calcSkuList()
      }
    }
  },
  created() {
    this.value.setSkuFields(this.skuFields)
    this.value.setIsEdit(this.isEdit)
    this.value.setLangOptions(this.lang)
    this.value.init()
  }
}
</script>
<style lang="scss" scoped>
.price-stock {
  background-color: #f9f9f9;
  padding: 15px;
}
</style>
